<template>
  <div>
    <table class="table-style-zw">
       <thead>
         <tr>
           <th></th>
           <th v-for="(item,index) in table_info.row_header" :key='index'>&nbsp;&nbsp;{{item}}</th>
         </tr>
       </thead>
       <tbody>
         <tr v-for="(item,index) in table_info.column_header" :key='index'>
           <td>
             <span v-for="(spaces,indexs) in item.level" :key='indexs'>&nbsp;&nbsp;</span>
             {{item.name}}
            </td>
            <td v-for='(contens,key) in table_info.table_content[index]' :key='key'>{{contens}}</td>
         </tr>
       </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name : 'TableZw',
  props:['table_info'],
  created () {

  }
}
</script>

<style lang='scss'  rel="stylesheet/scss" scoped>
.table-style-zw{
  width: calc(100% - 40px);
  border:1px solid #ddd;
  thead tr{
    background: #f4f4f4;
  }
  td,th{
     border:1px solid #ddd;
     font-size: 14px;
  }
  tr{
    box-sizing: border-box;
    height: 34px;
  }
  tbody tr:hover{
    background: #d9e7f1;
  }
  tbody{
    height:calc(100% - 34px);
    overflow: auto;
  }
}
</style>
